/*
 * 淡入卡片样式文件 - Fade In Card Styles
 * 定义文章卡片的外观、动画效果、悬停状态等样式
 */

.fadeInCard {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease-out;
  cursor: pointer;
  
  &.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  .card {
    height: 100%;
    border-radius: 16px;
    box-shadow: 0 8px 32px var(--shadow-color);
    transition: all 0.4s ease;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    overflow: hidden;
    
    &:hover {
      transform: translateY(-12px);
      box-shadow: 0 16px 48px var(--shadow-color);
      border-color: rgba(255, 182, 193, 40%);
    }
  }
  
  .imageContainer {
    width: 100%;
    height: 250px;
    overflow: hidden;
    position: relative;
    
    .cardImage {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
      image-rendering: optimize-contrast;
      image-rendering: crisp-edges;
      backface-visibility: hidden;
      transform: translateZ(0);
      
      &:hover {
        transform: scale(1.05) translateZ(0);
      }
    }
  }
  
  .cardContent {
    padding: 24px;
    
    .cardTitle {
      font-size: 22px;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0 0 16px;
      line-height: 1.4;
      transition: color 0.3s ease;
      
      // &:hover {
      //   color: #ec4899;
      // }
    }
    
    .cardAbstract {
      color: var(--text-secondary);
      line-height: 1.6;
      margin: 0;
      font-size: 16px;
      display: box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .fadeInCard {
    .imageContainer {
      height: 200px;
    }
    
    .cardContent {
      padding: 20px;
      
      .cardTitle {
        font-size: 18px;
        margin-bottom: 12px;
      }
      
      .cardAbstract {
        font-size: 13px;
      }
    }
  }
}

@media (max-width: 480px) {
  .fadeInCard {
    .imageContainer {
      height: 180px;
    }
    
    .cardContent {
      padding: 16px;
      
      .cardTitle {
        font-size: 16px;
        margin-bottom: 10px;
      }
    }
  }
}